<template>
	<view>
		<u-toast ref="uToast" /><u-no-network></u-no-network>
		<u-navbar title="商品规格" safeAreaInsetTop fixed placeholder>
			<view class="coreshop-navbar-left-slot" slot="left">
				<u-icon name="arrow-left" size="19" @click="goNavigateBack"></u-icon>
				<u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
				<u-icon name="home" size="22" @click="goHome"></u-icon>
			</view>
			<view slot="right">
			</view>
		</u-navbar>
		<view v-if="current==0">
			<view class="sku_product">
				<view class="title">
					选择SKU模型<button @click="showPopupSkuAdd = true;">添加</button>
				</view>
				<view class="con">
					<view v-for="(item,index) in list_sku" :class="(item.active && item.active==1 ? 'active':'')"
						@click="funChoiceSku(index, item.active && item.active==1 ? 1:0)">
						{{item.name}}
					</view>
				</view>
			</view>
			<view class="sku_product">
				<view v-for="(item,index) in list_sku" v-if="item.active && item.active==1" class="options">
					<view class="title">
						{{item.name}}<button @click="funShowPopupSkuValueAdd(item.id)">添加</button>
					</view>
					<view v-for="(item2,index2) in item.specValues"
						:class="(item2.active && item2.active==1 ? 'value active':'value')"
						@click="funChoiceSkuValue(index, index2, item2.active && item2.active==1 ? 1:0)">{{item2.value}}
					</view>
				</view>
			</view>
			<view class="coreshop-foot-hight-view" />
			<view class="coreshop-bg-white coreshop-footer-fixed coreshop-foot-padding-bottom coreshop-padding-5">
				<view class="coreshop-width-fit-content coreshop-padding-left-10 coreshop-padding-right-10"
					style="width: 40%;">
					<u-button type="primary" size="normal" @click="funGetValues">生成货品列表</u-button>
				</view>
			</view>
		</view>
		<view v-if="current==1">
			<view class="tags_con">
				<view class="con" v-for="(item,index) in list_products">
					<view class="title">
						<view class="photo">
							<u-icon v-if="item.images==''" @click="uploadImg(index)" name="camera"
								size="40rpx"></u-icon>
							<image v-else :src="item.images" @click="uploadImg(index)"></image>
						</view>
						<label>{{item.spesDesc}}</label>
						<text @click="funSetForm(index)">去设置</text>
						<u-icon name="arrow-right"></u-icon>
					</view>
					<view class="options">
						<view>
							<label>销售价</label><text>{{item.price?item.price:0}}</text>
						</view>
						<view>
							<label>成本价</label><text>{{item.costprice?item.costprice:0}}</text>
						</view>
						<view>
							<label>市场价</label><text>{{item.mktprice?item.mktprice:0}}</text>
						</view>
						<view>
							<label>库存</label><text>{{item.stock?item.stock:0}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="coreshop-foot-hight-view" />
			<view class="coreshop-bg-white coreshop-footer-fixed coreshop-foot-padding-bottom coreshop-padding-5">
				<view class="coreshop-width-fit-content coreshop-padding-left-10 coreshop-padding-right-10"
					style="width: 40%;">
					<u-button type="primary" size="normal" @click="current=0;">上一步</u-button>
				</view>
				<view class="coreshop-width-fit-content coreshop-padding-left-10 coreshop-padding-right-10"
					style="width: 40%;">
					<u-button type="warning" size="normal" @click="funSetForm(-1)">一键设置</u-button>
				</view>
				<view class="coreshop-width-fit-content coreshop-padding-left-10 coreshop-padding-right-10"
					style="width: 40%;">
					<u-button type="success" size="normal" @click="funSubmit" :disabled='submitStatus'
						:loading='submitStatus'>确认</u-button>
				</view>
			</view>
		</view>
		<u-popup :show="showPopupSkuAdd" mode="center" :round="10" :closeable="true" @close="closePopupSkuAdd">
			<view style="padding: 70rpx 8% 30rpx;">
				<u-form :model="formSku" ref="uFormSku">
					<u-form-item label="名称" prop="name" labelWidth="80rpx">
						<u-input v-model="formSku.name" placeholder="请输入名称" />
					</u-form-item>
					<u-form-item label="排序" prop="sort" labelWidth="80rpx">
						<u-input v-model="formSku.sort" placeholder="请输入排序" />
					</u-form-item>
				</u-form>
				<u-button type="success" @click="submitFormSku">提交</u-button>
			</view>
		</u-popup>
		<u-popup :show="showPopupSkuValueAdd" mode="center" :round="10" :closeable="true"
			@close="closePopupSkuValueAdd">
			<view style="padding: 70rpx 8% 30rpx;">
				<u-form :model="formSkuValue" ref="uFormSkuValue">
					<u-form-item label="名称" prop="value" labelWidth="80rpx">
						<u-input v-model="formSkuValue.value" placeholder="请输入名称" />
					</u-form-item>
					<u-form-item label="排序" prop="sort" labelWidth="80rpx">
						<u-input v-model="formSkuValue.sort" placeholder="请输入排序" />
					</u-form-item>
				</u-form>
				<u-button type="success" @click="submitFormSkuValue">提交</u-button>
			</view>
		</u-popup>
		<u-popup :show="showPopupForm" :closeable="true" @close="closePopupForm">
			<view style="padding: 70rpx 3% 30rpx;">
				<u-form :model="form" :rules="rules" ref="uForm">
					<u-form-item label="销售价" prop="price" labelWidth="120rpx">
						<u-input v-model="form.price" />
					</u-form-item>
					<u-form-item label="成本价" prop="costprice" labelWidth="120rpx">
						<u-input v-model="form.costprice" />
					</u-form-item>
					<u-form-item label="市场价" prop="mktprice" labelWidth="120rpx">
						<u-input v-model="form.mktprice" />
					</u-form-item>
					<u-form-item label="库存" prop="stock" labelWidth="120rpx">
						<u-input v-model="form.stock" />
					</u-form-item>
					<u-form-item label="重量" prop="weight" labelWidth="120rpx">
						<u-input v-model="form.weight" />
					</u-form-item>
					<u-form-item label="积分" prop="points" labelWidth="120rpx">
						<u-input v-model="form.points" />
					</u-form-item>
					<u-form-item label="图片" prop="images" labelWidth="120rpx">
						<u--image
							:src="form.images!=''?form.images:'https://pb.milane.com.cn//upload/20250622/20250622194521_2818.png'"
							width="100rpx" height="100rpx" shape="radius" @click="uploadImg(-1)"></u--image>
					</u-form-item>
				</u-form>
				<u-button type="success" @click="submitForm">提交</u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				goodsId: 0, //商品id
				info: {}, //商品对象
				goodsSkuIds: '', //（值：186,186）
				goodsSkuValues: '', //（值：186:颜色:红色|187:尺码:41|187:尺码:42）
				list_current: ['规格', '价格与库存'],
				current: 0,
				list: [{
					title: '',
					image: '',
					values: [{
						name: ''
					}]
				}],
				submitStatus: false,
				list_tabs: [], //规格tabs
				showPopupSku: false, //是否选择sku弹窗
				showPopupForm: false, //是否表单
				list_sku: [], //sku值
				count_sku: 0, //sku选择数量
				list_values: [], //规格值
				list_products: [], //产品列表

				showPopupSkuAdd: false, //sku添加
				formSku: {
					name: '',
					sort: '0'
				},

				showPopupSkuValueAdd: false, //sku值添加
				formSkuValue: {
					specId: '',
					value: '',
					sort: '0'
				},

				indexValues: 0,
				form: {
					price: '', //销售价
					costprice: '', //成本价
					mktprice: '', //市场价
					stock: '', //库存
					weight: '', //重量
					points: '', //积分
					pointsDeduction: '', //积分最大抵扣
					images: '', //图片
				},
				rules: {
					'points': {
						type: 'number',
						message: '积分格式不正确',
						trigger: ['blur', 'change']
					},
					'weight': {
						type: 'float',
						message: '重量格式不正确',
						trigger: ['blur', 'change']
					},
				},
			}
		},
		onLoad(e) {
			var _this = this;

			//产品
			if (e.products) {
				_this.list_products = JSON.parse(e.products);
			}
			//sku列表
			if (e.list_sku) {
				_this.list_sku = JSON.parse(e.list_sku);
			} else {
				//获取sku
				_this.getSkuList();
			}
			//sku数量
			if (e.count_sku) {
				_this.count_sku = e.count_sku;
			}

		},
		onReady() {

		},
		methods: {
			//获取sku
			getSkuList() {
				var _this = this;

				//获取sku
				let params = {}
				_this.$u.api.getSkuList(params).then(res => {
					console.log(res);
					var _data = res.data;
					for (let i = 0; i < _data.length; i++) {
						_data[i].values = [{
							name: ''
						}]
					}
					_this.list_sku = _data;

				})
			},
			//一键设置确认
			submitForm() {
				this.$refs.uForm.validate().then(res => {
					if (this.indexValues > -1) {
						this.list_products[this.indexValues].price = this.form.price;
						this.list_products[this.indexValues].costprice = this.form.costprice;
						this.list_products[this.indexValues].mktprice = this.form.mktprice;
						this.list_products[this.indexValues].stock = this.form.stock;
						this.list_products[this.indexValues].weight = this.form.weight;
						this.list_products[this.indexValues].points = this.form.points;
						this.list_products[this.indexValues].pointsDeduction = this.form.pointsDeduction;
						this.list_products[this.indexValues].images = this.form.images;

						this.$forceUpdate();
						this.showPopupForm = false;
					} else {
						var list_products = this.list_products;
						for (let i = 0; i < list_products.length; i++) {
							list_products[i].price = this.form.price;
							list_products[i].costprice = this.form.costprice;
							list_products[i].mktprice = this.form.mktprice;
							list_products[i].stock = this.form.stock;
							list_products[i].weight = this.form.weight;
							list_products[i].points = this.form.points;
							list_products[i].pointsDeduction = this.form.pointsDeduction;
							list_products[i].images = this.form.images;
						}

						this.list_products = list_products;
						this.$forceUpdate();
						this.showPopupForm = false;
					}

				}).catch(errors => {
					uni.$u.toast('内容格式有误')
				})
			},
			//新增sku
			submitFormSku() {
				var _this = this;

				//判断
				if (this.formSku.name == '') {
					this.$u.toast('名称不能为空!')
					return;
				}

				//插入sku
				let params = {
					name: _this.formSku.name,
					sort: _this.formSku.sort
				}
				_this.$u.api.createSku(params).then(res => {
					uni.$u.toast(res.msg);

					_this.list_sku.push(res.otherData);
					_this.showPopupSkuAdd = false;
					_this.formSku = {
						name: '',
						sort: '0'
					};
				});
			},
			//新增sku内容
			submitFormSkuValue() {
				var _this = this;
				var list_sku = _this.list_sku;

				//判断
				if (this.formSkuValue.value == '') {
					this.$u.toast('名称不能为空!')
					return;
				}

				//插入sku
				let params = {
					specId: _this.formSkuValue.specId,
					value: _this.formSkuValue.value,
					sort: _this.formSkuValue.sort
				}
				_this.$u.api.createSkuValue(params).then(res => {
					uni.$u.toast(res.msg);

					for (let i = 0; i < _this.list_sku.length; i++) {
						if (_this.list_sku[i].id == _this.formSkuValue.specId) {
							_this.list_sku[i].specValues.push(res.otherData);
						}
					}
					_this.list_sku = list_sku;
					_this.showPopupSkuValueAdd = false;
					_this.formSkuValue = {
						specId: '',
						value: '',
						sort: '0'
					};
				});
			},
			//去设置
			funSetForm(index) {
				this.showPopupForm = true;
				this.indexValues = index;

				if (index > -1) {
					//赋值
					this.form = {
						price: this.list_products[index].price, //销售价
						costprice: this.list_products[index].costprice, //成本价
						mktprice: this.list_products[index].mktprice, //市场价
						stock: this.list_products[index].stock, //库存
						weight: this.list_products[index].weight, //重量
						points: this.list_products[index].points, //积分
						pointsDeduction: this.list_products[index].pointsDeduction, //积分最大抵扣
						images: this.list_products[index].images, //图片
					}
				} else {
					//赋值
					this.form = {
						price: 0, //销售价
						costprice: 0, //成本价
						mktprice: 0, //市场价
						stock: 9999, //库存
						weight: 0, //重量
						points: 0, //积分
						pointsDeduction: 0, //积分最大抵扣
						images: '', //图片
					}
				}
				this.$forceUpdate();
			},
			//点击添加sku内容
			funShowPopupSkuValueAdd(specId) {
				this.showPopupSkuValueAdd = true;
				this.formSkuValue.specId = specId;
			},
			//关闭添加sku内容
			closePopupSkuValueAdd() {
				this.showPopupSkuValueAdd = false;
			},
			//点击选中规格
			funChoiceSku(index, active) {
				var list_sku = this.list_sku;
				var count_sku = this.count_sku;

				//判断是否已经选择了2个
				if (active == 0 && count_sku >= 2) {
					this.$u.toast('规格最多选择2项!')
					return;
				}

				for (let i = 0; i < list_sku.length; i++) {
					if (i == index) {
						if (list_sku[i].active && list_sku[i].active == 1) {
							list_sku[i].active = 0;
							count_sku--;
						} else {
							list_sku[i].active = 1;
							count_sku++;
						}
					}
				}
				this.list_sku = list_sku;
				this.count_sku = count_sku;
				this.$forceUpdate();
			},
			//点击选中规格
			funChoiceSkuValue(index, index2, active) {
				var list_sku = this.list_sku;

				for (let i = 0; i < list_sku.length; i++) {
					if (i == index) {
						for (let j = 0; j < list_sku[i].specValues.length; j++) {
							if (j == index2) {
								if (list_sku[i].specValues[j].active && list_sku[i].specValues[j].active == 1) {
									list_sku[i].specValues[j].active = 0;
								} else {
									list_sku[i].specValues[j].active = 1;
								}
							}
						}
					}
				}
				this.list_sku = list_sku;
				this.$forceUpdate();
			},
			//点击关闭规格
			closePopupSku() {
				this.showPopupSku = false;
			},
			//点击关闭规格添加
			closePopupSkuAdd() {
				this.showPopupSkuAdd = false;
				this.showPopupSku = true;
			},
			//点击关闭表单
			closePopupForm() {
				this.showPopupForm = false;
			},
			//删除规格值
			funDelValue(index, index2) {
				var list_sku = this.list_sku;
				if (list_sku[index].values.length <= 1) {
					this.$u.toast('规格值至少需要1项!')
					return;
				}
				uni.showModal({
					title: '提示',
					content: '确定要删除该规格值吗？',
					success: (res) => {
						if (res.confirm) {
							list_sku[index].values.splice(index2, 1);
							this.list_sku = list_sku;
							this.$forceUpdate();
						} else if (res.cancel) {

						}
					}
				});

			},
			//确认
			funSubmit() {
				var _this = this;
				_this.getSkuValues();
				let data = {
					id: _this.goodsId,
					goodsSkuIds: _this.goodsSkuIds,
					goodsSkuValues: _this.goodsSkuValues,
					products: JSON.stringify(_this.list_products),
					list_sku: JSON.stringify(_this.list_sku),
					count_sku: _this.count_sku,
				}

				// 发送数据到A页面
				this.$eventBus.$emit('saveData', data)
				// 返回上一页
				uni.navigateBack();

				// _this.$u.api.goodsEditSku(data).then(res => {
				// 	if (res.status) {
				// 		_this.$refs.uToast.show({
				// 			message: res.msg,
				// 			type: 'success',
				// 			complete: function() {

				// 			}
				// 		})
				// 	} else {
				// 		_this.$u.toast(res.msg)
				// 	}
				// })
			},
			//计算一些选中的值
			getSkuValues() {
				var goodsSkuIds = '';
				var goodsSkuValues = '';
				var count_sku = 0;
				console.log(this.list_sku);
				for (let i = 0; i < this.list_sku.length; i++) {
					if (this.list_sku[i].active && this.list_sku[i].active == 1) {
						goodsSkuIds += this.list_sku[i].id + ','
						count_sku++;
						for (let j = 0; j < this.list_sku[i].specValues.length; j++) {
							if (this.list_sku[i].specValues[j].active && this.list_sku[i].specValues[j].active == 1) {
								goodsSkuValues += this.list_sku[i].id + ':' + this.list_sku[i].name + ':' + this.list_sku[i].specValues[j].value + '|';
							}
						}
					}
				}
				this.goodsSkuIds = goodsSkuIds.slice(0, -1);
				this.goodsSkuValues = goodsSkuValues.slice(0, -1);
				this.count_sku = count_sku;
				console.log(this.goodsSkuValues)
			},
			//计算规格值
			funGetValues() {
				var _this = this;

				uni.showModal({
					title: '提示',
					content: '确定要生成货品列表吗？',
					success: (res) => {
						if (res.confirm) {
							var tabs = [];
							for (let i = 0; i < this.list_sku.length; i++) {
								if (this.list_sku[i].active && this.list_sku[i].active == 1) {
									tabs.push(this.list_sku[i]);
								}
							}

							var list_products = [];
							if (tabs.length == 1) {
								for (let i = 0; i < tabs[0].specValues.length; i++) {
									if (tabs[0].specValues[i].active && tabs[0].specValues[i].active == 1) {
										list_products.push({
											name: '', //底层再赋值
											spesDesc: tabs[0].name + ':' + tabs[0].specValues[i].value,
											price: 0, //销售价
											costprice: 0, //成本价
											mktprice: 0, //市场价
											stock: 9999, //库存
											weight: 0, //重量
											points: 0, //积分
											pointsDeduction: 0, //积分最大抵扣
											images: '', //图片
										})
									}
								}
							} else {
								for (let i = 0; i < tabs[0].specValues.length; i++) {
									if (tabs[0].specValues[i].active && tabs[0].specValues[i].active == 1) {
										for (let j = 0; j < tabs[1].specValues.length; j++) {
											if (tabs[1].specValues[j].active && tabs[1].specValues[j].active ==
												1) {
												list_products.push({
													name: '', //底层再赋值
													spesDesc: tabs[0].name + ':' + tabs[0].specValues[
															i]
														.value +
														',' + tabs[1].name + ':' + tabs[1].specValues[
															j]
														.value,
													price: 0, //销售价
													costprice: 0, //成本价
													mktprice: 0, //市场价
													stock: 9999, //库存
													weight: 0, //重量
													points: 0, //积分
													pointsDeduction: 0, //积分最大抵扣
													images: '', //图片
												})
											}
										}
									}
								}
							}

							this.list_products = list_products;
							this.current = 1;
							this.$forceUpdate();

							console.log('list_products:' + JSON.stringify(list_products));
						} else if (res.cancel) {

						}
					}
				});

			},
			//上传图片
			uploadImg(index) {
				this.$upload.uploadFiles(null, res => {
					if (res.status) {
						//this.images[key].push(res.data.src + '?x-oss-process=image/resize,m_lfit,h_200,w_200')
						//this.images.push(res.data.src)

						if (index >= 0) {
							this.list_products[index].images = res.data.src;
						} else if (index == -1) {
							this.form.images = res.data.src;
						}
						this.$forceUpdate();

						this.$refs.uToast.show({
							title: res.msg,
							type: 'success',
							back: false
						})
					} else {
						this.$u.toast(res.msg)
					}
				})
			},
		},
		//页面卸载触发
		onUnload() {

		}
	}
</script>

<style lang="scss">
	.btn-settings {
		width: 100%;
		text-align: center;
	}

	.sku_product {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 10rpx 3%;
		margin: 20rpx 3% 0;
		position: relative;

		.title {
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-bottom: 10px;
			line-height: 65rpx;
			justify-content: space-between;

			button {
				margin: 0;
				padding: 0 20rpx;
				height: 50rpx;
				line-height: 50rpx;
				font-size: 24rpx;
				background-color: #f56c6c;
				color: #fff;
			}
		}

		.options {
			overflow: hidden;

			view.title {
				margin-bottom: 5rpx;
				font-size: 28rpx;
			}

			view.value {
				float: left;
				font-size: 24rpx;
				background-color: #f0f0f0;
				border-radius: 8px;
				text-align: center;
				margin: 0 10rpx 10rpx 0;
				padding: 10rpx 20rpx;
			}

			view.active {
				background-color: #04c668;
				color: #fff;
			}
		}

		.con {
			display: flex;
			flex-wrap: wrap;
			font-size: 26rpx;

			view {
				text-align: center;
				height: 70rpx;
				line-height: 70rpx;
				width: calc(25% - 10rpx);
				margin-right: 13.3333rpx;
				margin-bottom: 20rpx;
				background-color: #f0f0f0;
				border-radius: 8px;
				box-sizing: border-box;
				transition: all 0.3s ease;
			}

			view:nth-child(4n) {
				margin-right: 0;
			}

			view.active {
				background-color: #04c668;
				color: #fff;
			}
		}
	}

	.sku_con {
		padding: 80rpx 3% 0;
		display: flex;
		flex-wrap: wrap;
		font-size: 26rpx;

		.value {
			text-align: center;
			height: 70rpx;
			line-height: 70rpx;
			width: calc(25% - 10px);
			margin-right: 10px;
			margin-bottom: 20px;
			background-color: #f0f0f0;
			border-radius: 8px;
			box-sizing: border-box;
			transition: all 0.3s ease;
		}

		.value:nth-child(4n) {
			margin-right: 0;
		}

		.value.active {
			background-color: #04c668;
			color: #fff;
		}
	}

	.sku_add {
		background-color: #3c9cff;
		color: #fff;
		border-radius: 5px;
		text-align: center;
		height: 70rpx;
		width: 200rpx;
		line-height: 70rpx;
		display: block;
		margin: 20rpx auto 10rpx;
		font-size: 26rpx;
	}

	.tags_con {
		display: flex;
		flex-direction: column;
		padding: 15rpx 3%;
		font-size: 26rpx;

		.con {
			background-color: #fff;
			border-radius: 10px;
			padding: 10px;
			margin-bottom: 10px;
			position: relative;

			.title {
				display: flex;
				flex-direction: row;
				align-items: center;

				.photo {
					border: 1px solid #DFDFDF;
					border-radius: 10rpx;
					width: 60rpx;
					height: 60rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-right: 10rpx;

					image {
						width: 60rpx;
						height: 60rpx;
					}
				}

				label {
					flex: 1;
				}

				text {
					color: #04c668;
				}
			}

			.options {
				background-color: #F5F5F5;
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				margin-top: 20rpx;
				padding: 10rpx 3%;

				view {
					width: calc(50% - 10px);
					padding: 10rpx 0;
					display: flex;
					flex-direction: row;

					label {
						width: 100rpx;
					}

					text {
						color: #04c668;
					}
				}
			}
		}
	}

	.product_con {
		display: flex;
		flex-direction: column;
		padding: 15rpx 3%;
		font-size: 26rpx;

		.con {
			background-color: #fff;
			border-radius: 20rpx;
			padding: 20rpx;
			margin-top: 20rpx;
			position: relative;

			.title {
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-bottom: 10px;
			}

			.values {

				view.vcon {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 10px;

					input {
						flex: 1;
						border: 1px solid #DCDCDC;
						border-radius: 5px;
						height: 70rpx;
						padding: 0 10px;
						margin-right: 10px;
					}
				}
			}

			.add {
				color: #04c668;
			}

			.del {
				position: absolute;
				right: 3%;
				top: 20rpx;
				color: #04c668;
			}
		}
	}
</style>